<template>
	<view class="content">
		<!-- 返回顶部 -->
		<view v-show="isShow==true" class="head" @click="beark">
			<u-icon name="arrow-up"></u-icon>
		</view>
		<!-- 调用轮播分页器 -->
		<uni-swiper-dot :info="list"  :current="current" mode="round" :dots-styles="{ backgroundColoe:'rgba(0,0,0,0.5)',selectedBackgroundColor:'#ffffff',selectedBorder:'#fff' }">
			<swiper class="swiperContainer" @change="changeBanner" :autoplay="true" :interval="3000">
				<swiper-item v-for="item in list" :key="item">
					<image class="img" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 卡片轮播图 -->
		<view class="u-demo-block">
			<view>新品推荐</view>
			<u-swiper :list="list3" imgMode="aspectFill" indicatorMode="link" previousMargin="32%" nextMargin="32%" circular :autoplay="true" 
					height="120" radius="5" bgColor="#ffffff" :interval="4000"></u-swiper>
		</view>
		<!-- 选项卡商品区域 -->
		<view class="tabs">
			<u-sticky bgColor="#fff">
				<template>
					<u-tabs :list="tabsList" :scrollable="false" 
						lineColor="#d81e06" :activeStyle="{color: '#d81e06'}" 
						:inactiveStyle="{color:'black'}" itemStyle="height:44px;width:25%;"
						@change="getGoods" :current="currentIndex">
					</u-tabs>
				</template>
			</u-sticky>
		</view>
		
		<good-list :list="goods"></good-list>
		<u-empty v-if="goods==''" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		<block v-if="status=='loadmore'">
			<u-loadmore :status="status" />
		</block>
	</view>
</template>

<script>
//引入请求文件
import { apiBanner,apiIndexTabs,apiGoods } from '../../api/mock'
export default {
	data() {
		return {
			list : [],		// 轮播图片地址
			current : 0,
			tabsList:[],	// 选项卡名称
			currentIndex:0,
			goods:[],
			p : 1,		//当前页码
			num : 6,	//每页条数
			isShow : false,//返回顶部按钮显示状态
			status: 'loadmore',
			 list3: [
				'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/202401/29006/list_29006.jpg?v=1705462073',
				'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/merge/BB848569BA1B55D8D6B1BFF1BA1C292F.gif',
				'https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/202404/29108/list_29108.jpg?v=1714525786',
			],
		}
	},
	onLoad() {
		uni.showLoading({
			title:'启动中...',
			mask:true,
		})
		// 当页面加载完后，请求各类数据数据
		this.getBanner();
		this.getIndexTabs();
		// bug：由于请求返回需要1秒，为了顺利获取数据设置定时器2秒后在执行该函数
		setTimeout(()=>{
			this.getGoods({index:0});
		},1100)
	},
	// 触底—添加商品的下一页数据
	onReachBottom() {
		this.status = 'loadmore';
		this.p++;	//每次触底页码自增
		// 根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
		let tabname =this.currentIndex ==0 ?'全部' : this.tabsList[this.currentIndex].name;
		// 获取触底后的页码对应的数据
		apiGoods(this.p,this.num,tabname).then((res)=>{
			console.log(res);
			this.goods =[...this.goods,...res];
			this.status ='nomore';
		}).catch((err)=>{
			console.log(err);
		})
	},
	// 下拉重置整个页面：重置data函数初始化；页面数据重新发起请求
	onPullDownRefresh(){
		setTimeout(()=>{
			// 关闭下拉
			uni.stopPullDownRefresh();
			this.currentIndex =0;
			this.p =1;
			this.getBanner();
			this.getIndexTabs();
			this.getGoods({index:0});
			uni.showToast({icon:"none",title:'刷新成功'})
		},1000);
	},
	onPageScroll(e) {
		this.isShow=false;
		if(e.scrollTop>250){
			this.isShow=true;
		}
	},
	methods: {
		beark(){
			uni.pageScrollTo({
				scrollTop:0
			})
		},
		// 轮播改变事件
		changeBanner(e){
			this.current = e.detail.current;
		},
		// 调用请求轮播数据的函数
		getBanner(){
			// 调用函数
			apiBanner('asc').then((res)=>{
				uni.hideLoading();
				this.list =res;
				console.log(this.list);
			}).catch((err)=>{
				console.log(err);
			})
		},
		// 调用请求选项卡数据的函数
		getIndexTabs(){
			// 调用函数
			apiIndexTabs('asc').then((res)=>{
				uni.hideLoading();
				this.tabsList =res;
				console.log(this.tabsList);
			}).catch((err)=>{
				console.log(err);
			})
		},
		// 选项卡的改变事件
		getGoods(e){
			this.currentIndex =e.index;
			let tabname =this.tabsList[e.index].name;
			console.log(tabname);
			this.p =1;
			this.goods =[];
			apiGoods(this.p,this.num,tabname).then((res)=>{
				console.log(res);
				this.goods = res;
			}).catch((err)=>{
				console.log(err);
			})
		},
	}
}
</script>

<style lang="scss">
.content{
	width: 100%;
}
.content .u-demo-block{
	width: 98%;
	margin: 10px auto;
}
.content .u-demo-block view{
	margin: 8px auto;
	font-size: 16px;
	font-weight: bold;
	color: #717171;
}
.swiperContainer .img{
	width: 100%;
}
.tabs{
	width: 100%;
	overflow: hidden;
	border-bottom: 2px solid #eee;
	padding-bottom: 6px;
}
.head{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e8e8e8;
	position: fixed;
	bottom: 80px;
	right: 25px;
	animation: klf 6s linear infinite;
	z-index: 1;
}
@keyframes klf{
	0% { border: 1px solid red; }
	25% { border: 1px solid blue; }
	50% { border: 1px solid green; }
	75% { border: 1px solid yellow; }
	100% { border: 1px solid red; }
}
</style>